<script setup>
import { ref, onMounted } from 'vue'
import { formatDate } from '@/utils/format'

// API 引入
import {
  getconsumerList,
  deleteConsumer
} from '@/api/consumer'

// 子组件引入
import consumerDetail from './subs/consumerDetail.vue'
import EditConsumer from './subs/EditConsumer.vue'
import UpdateConsumer from './subs/UpdateConsumer.vue'
import DeleteConsumer from './subs/DeleteConsumer.vue'

// 数据状态
const consumers = ref([])
const queryParams = ref({
  pageNo: 1,
  size: 6,
  search: ''
})
const total = ref(0)
const loading = ref(false)

// 获取客户列表
const consumersList = async () => {
  loading.value = true
  try {
    const response = await getconsumerList(queryParams.value)
    if (response.code === '0' && response.data) {
      consumers.value = response.data.records || []
      total.value = response.data.total || 0
    } else {
      consumers.value = []
      total.value = 0
      console.error('接口返回错误:', response.msg)
    }
  } catch (err) {
    console.error('请求失败:', err)
    consumers.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 分页切换
const change = (pageNo, size) => {
  queryParams.value.pageNo = pageNo
  queryParams.value.size = size
  consumersList()
}

// 搜索客户
const submitForm = () => {
  queryParams.value.pageNo = 1
  consumersList()
}

// 显示详情
const consumerDetailRef = ref(null)
const showDetail = (row) => {
  consumerDetailRef.value?.openDrawer(row)
}

// 添加客户
const addConsumerRef = ref(null)
const addconsumer = () => {
  addConsumerRef.value?.openDrawer()
}

// 编辑客户
const editConsumerRef = ref(null)
const editconsumer = (row) => {
  editConsumerRef.value?.openDrawer(row)
}

// 删除客户
const deleteConsumerRef = ref(null)
const handleDelete = (row) => {
  deleteConsumerRef.value.open(row, deleteConsumer).then(() => {
    consumersList()
  })
}

// 页面加载时获取数据
onMounted(() => {
  consumersList()
})
</script>

<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="queryParams" label-width="auto" class="demo-form-inline">
          <el-form-item label="客户">
            <el-input placeholder="请输入客户信息" clearable v-model="queryParams.search" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">搜</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addconsumer">添加</el-button>
      </div>
    </template>

    <el-table :data="consumers" style="width: 100%" :loading="loading">
      <el-table-column label="编号">
        <template #default="{ row }">
          <el-link type="primary" @click="showDetail(row)">{{ row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="phoneNum" label="手机号" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="location" label="地点" />
      <el-table-column prop="create_time" label="创建时间" :formatter="formatDate" />
      <el-table-column prop="update_time" label="上次登录时间" :formatter="formatDate" />
      <el-table-column prop="birth" label="生日" :formatter="formatDate" />
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button size="small" type="warning" @click="editconsumer(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="example-pagination-block">
      <el-pagination
        background
        layout="prev, pager, next"
        @change="change"
        :total="total"
        :page-size="queryParams.size"
      />
    </div>
  </el-card>

  <!-- 抽屉组件 -->
  <consumer-detail ref="consumerDetailRef" />
  <edit-consumer
    ref="addConsumerRef"
    @submitSuccess="() => {
      queryParams.pageNo = 1
      consumersList()
    }"
  />
  <update-consumer
  ref="editConsumerRef"
  @updateSuccess="consumersList"
/>

  <delete-consumer
  ref="deleteConsumerRef"
  @deleteSuccess="consumersList"
/>

</template>

<style scoped>
.el-card {
  min-height: 100%;
  width: 100vw;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
